<template>
  <div class="home" v-title :data-title="title">
    <div class="home-title">
      <pan-thumb v-bind="PanThumb" />
      <top-title style="margin-top: -100px; margin-left: 100px" />
    </div>
    <div style="display: flex; margin-top: -80px">
      <small-card
        v-for="(card, index) in cardList"
        :key="index"
        v-bind="card"
      />
    </div>
    <div class="home-center">
      <radar v-bind="radarList" style="margin-bottom: 20px" />
      <div>
        <hello />
      </div>
      <div>
        <earth />
      </div>
    </div>
  </div>
</template>

<script>
import Earth from "../components/index/Earth.vue";
import Hello from "../components/index/Hello.vue";
import PanThumb from "../components/index/PanThumb.vue";
import Radar from "../components/index/Radar.vue";
import SmallCard from "../components/index/SmallCard.vue";
import TopTitle from "../components/index/TopTitle.vue";
import { selectUser } from "@/api/user";
import { selectArticle } from "@/api/article";
import { selectCategory } from "@/api/category";
import { selectTag } from "@/api/tag";

export default {
  components: { Hello, Earth, TopTitle, Radar, PanThumb, SmallCard },
  name: "Home",
  computed: {
    title() {
      return "首页 - news-back";
    },
  },
  data() {
    return {
      PanThumb: {
        image: require("../assets/cafe.gif"),
        width: "200px",
        height: "200px",
      },
      cardList: [
        {
          image: require("../assets/user.png"),
          title: "用户数",
          detail: "",
          color: "#40c9c6",
        },
        {
          image: require("../assets/article.png"),
          title: "文章数",
          detail: "",
          color: "#36a3f7",
        },
        {
          image: require("../assets/catgory.png"),
          title: "文章类别",
          detail: "",
          color: "#f4516c",
        },
        {
          image: require("../assets/tag.png"),
          title: "标签",
          detail: "",
          color: "#34bfa3",
        },
      ],
      radarList: {
        datatest: "111",
      },
    };
  },
  mounted() {
    this.getCount();
  },
  methods: {
    getCount() {
      selectUser({
        current: 1,
        pageSize: 100000,
      })
        .then((res) => {
          this.cardList[0].detail = res.data.total;
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "获取用户数失败",
          });
        });

      selectArticle({
        current: 1,
        pageSize: 10,
      })
        .then((res) => {
          this.cardList[1].detail = res.data.total;
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "获取文章数失败",
          });
        });

      selectCategory({
        current: 1,
        pageSize: 100000,
      })
        .then((res) => {
          this.cardList[2].detail = res.data.total;
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "获取类别数失败",
          });
        });

      selectTag({
        current: 1,
        pageSize: 100000,
      })
        .then((res) => {
          this.cardList[3].detail = res.data.total;
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "error",
            message: "获取标签数失败",
          });
        });
    },
  },
};
</script>

<style>
.home {
  /* display: flex;
  flex-wrap: wrap; */
  width: 100%;
}
.home-title {
  display: flex;
  justify-content: flex-start;
  /* transform: translate(-50%);
  margin-left: 50%; */
  /* margin-top: -150px; */
}
.home-center {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>